<!--
 * @Author: your name
 * @Date: 2021-07-01 18:06:33
 * @LastEditTime: 2021-07-03 12:09:55
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vuecli-demo\src\components\TodoFooter.vue
-->
<template>
  <footer class="footer">
    <!-- This should be `0 items left` by default -->
  <span class="todo-count"><strong>{{ unDoneTodoLength }}</strong> item left</span>
    <!-- Remove this if you don't implement routing -->
    <ul class="filters"
      @click="$emit('switch-todo',type)">
      <li>
        <a href="#/"
          :class="{selected : type === 'all'}" 
          @click="type='all'">All</a>
      </li>
      <li>
        <a href="#/active"
          :class="{selected : type === 'no'}" 
          @click="type='no'">Active</a>
      </li>
      <li>
        <a href="#/completed"
          :class="{selected : type === 'yes'}" 
          @click="type='yes'">Completed</a>
      </li>
    </ul>
    <!-- Hidden if no completed items are left ↓ -->
    <button class="clear-completed"
      v-if="hasDoneTodo" 
      @click="clearFn">Clear completed</button>
  </footer>
</template>

<script>
export default {
  data () {
    return {
        type:'all'//no yes
      }
  },
  props: ['arr'],
  computed: {
    unDoneTodoLength(){
      return this.arr.filter(item => item.isDone == false).length
    },
    hasDoneTodo(){
      return this.arr.some(item => item.isDone === true)
    }
  },
  methods: {
    clearFn(){
      if (window.confirm('确认要删除已完成吗？')) {
      this.$emit('clear-todo')
    }
    }
  }
};
</script>

<style>
</style>